/* eslint-disable react-native/no-inline-styles */
import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  Text,
  Image,
  Picker,
  TouchableOpacity,
  KeyboardAvoidingView,
  ScrollView,
  Keyboard,
  TouchableWithoutFeedback,
  ActivityIndicator
} from 'react-native';
import styled from 'styled-components';
import LinearGradient from 'react-native-linear-gradient';
import { Actions } from 'react-native-router-flux';
import Textarea from 'react-native-textarea';
import { getUserInfo, getToken } from '../../../utils/auth';
import { addRepaireHandle } from '../../../api/index';
import Toast from 'antd-mobile-rn/lib/toast';

export default class addRepaire extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: '故障报修申请',
      imgUrl: require('../../../assets/work/sportsRankings/backtrack.png'),
      formTitle: '',
      applyDeptName: '',
      applyDeptId: '',
      bdExplain: '', // 描述
      bdGeneralities: '', //故障总类
      bdType: '', // 故障类型
      token: '',
      isPatching: false
    };
  }

  componentDidMount() {
    getUserInfo().then(info => {
      console.log(JSON.stringify(info.dept, null, 4));
      this.setState({
        applyDeptName: info.dept.sdtDeptName,
        applyDeptId: info.dept.sdtDeptId
      });
    });
    getToken().then(token => {
      this.setState({ token });
    });
  }
  handleAddRepaire() {
    if (!this.state.bdGeneralities) {
      Toast.fail('请选择故障总类', 1);
      return;
    }
    if (!this.state.bdType) {
      Toast.fail('请选择故障类型', 1);
      return;
    }
    if (!this.state.bdExplain) {
      Toast.fail('请填写故障描述', 1);
      return;
    }
    this.setState({ isPatching: true });
    addRepaireHandle(this.state.token, {
      bdExplain: this.state.bdExplain,
      bdGeneralities: this.state.bdGeneralities,
      bdType: this.state.bdType
    }).then(res => {
      if (res.code === '0') {
        this.setState({ isPatching: false });
        Toast.success('故障申请成功', 1);
        Actions.pop();
      }
    });
  }
  render() {
    if (this.state.isPatching) {
      return (
        <ActivityIndicator
          animating={this.state.isPatching}
          style={[styles.centering, { height: 80 }]}
          size="large"
        />
      );
    }
    return (
      <KeyboardAvoidingView style={{ flex: 1 }}>
        <View style={{ flex: 1 }}>
          <View style={styles.header}>
            <TouchableOpacity
              style={{ width: 25.67, height: 22.33, marginBottom: 5 }}
              onPress={() => Actions.pop()}>
              <View>
                <Image
                  source={this.state.imgUrl}
                  style={{ width: 25.67, height: 22.33, marginBottom: 5 }}
                />
              </View>
            </TouchableOpacity>
            <View
              style={{
                borderBottomColor: '#EDEDED',
                borderBottomWidth: 1,
                borderBottomStyle: 'dashed',
                paddingBottom: 10,
                flexDirection: 'row',
                justifyContent: 'space-between',
                position: 'relative',
                bottom: 0
              }}>
              <Text style={{ fontSize: 30, fontWeight: 'bold' }}>
                {this.state.title}
              </Text>
              <View>
                <TouchableOpacity
                  onPress={({ nativeEvent: e }) => {
                    console.log('show : ');
                  }}>
                  <Image
                    source={require('../../../assets/work/inform/moreHandle.png')}
                    style={{
                      width: 16.75,
                      height: 3.5,
                      marginTop: 18
                    }}
                  />
                </TouchableOpacity>
              </View>
            </View>
          </View>
          <ScrollView keyboardShouldPersistTaps="handled">
            <View
              style={{
                width: '100%',
                height: 50,
                backgroundColor: '#fff',
                flexDirection: 'row',
                justifyContent: 'space-between',
                paddingRight: 30,
                paddingLeft: 30,
                marginTop: 10,
                marginBottom: 10
              }}>
              <Text style={{ width: '30%', textAlign: 'left', lineHeight: 50 }}>
                申请部门{' '}
                <Text style={{ color: 'red', marginLeft: 10 }}> * </Text>
              </Text>
              <Text
                style={{
                  width: '70%',
                  height: 50,
                  lineHeight: 50,
                  textAlign: 'center'
                }}>
                {this.state.applyDeptName}
              </Text>
            </View>
            <View
              style={{
                width: '100%',
                height: 50,
                backgroundColor: '#fff',
                flexDirection: 'row',
                justifyContent: 'space-between',
                paddingRight: 30,
                paddingLeft: 30,
                marginTop: 10,
                marginBottom: 10
              }}>
              <Text style={{ width: '30%', textAlign: 'left', lineHeight: 50 }}>
                故障总类{' '}
                <Text style={{ color: 'red', marginLeft: 10 }}> * </Text>
              </Text>
              <Picker
                selectedValue={this.state.bdGeneralities}
                style={{ height: 50, width: 250 }}
                prompt={'点击选择故障总类'}
                mode="dropdown"
                onValueChange={(itemValue, itemIndex) =>
                  this.setState({ bdGeneralities: itemValue })
                }>
                <Picker.Item label="请选择故障总类" value="" />
                <Picker.Item label="办公" value="1" />
                <Picker.Item label="安防" value="2" />
                <Picker.Item label="水电" value="3" />
                <Picker.Item label="消防" value="4" />
                <Picker.Item label="其他" value="99" />
              </Picker>
            </View>
            <View
              style={{
                width: '100%',
                height: 50,
                backgroundColor: '#fff',
                flexDirection: 'row',
                justifyContent: 'space-between',
                paddingRight: 30,
                paddingLeft: 30,
                marginTop: 10,
                marginBottom: 10
              }}>
              <Text style={{ width: '30%', textAlign: 'left', lineHeight: 50 }}>
                故障类型{' '}
                <Text style={{ color: 'red', marginLeft: 10 }}> * </Text>
              </Text>
              <Picker
                selectedValue={this.state.bdType}
                style={{ height: 50, width: 250 }}
                placeholder="点击选择故障类型"
                mode="dropdown"
                onValueChange={(itemValue, itemIndex) =>
                  this.setState({ bdType: itemValue })
                }>
                <Picker.Item label="请选择故障类型" value="" />
                <Picker.Item label="门禁" value="1" />
                <Picker.Item label="监控" value="2" />
                <Picker.Item label="对讲" value="3" />
                <Picker.Item label="报警" value="4" />
                <Picker.Item label="点名" value="5" />
              </Picker>
            </View>
            <View
              style={{
                width: '100%',
                backgroundColor: '#fff',
                paddingRight: 30,
                paddingLeft: 30,
                paddingTop: 15,
                paddingBottom: 15,
                marginBottom: 10
              }}>
              <Text style={{ width: '30%', textAlign: 'left', lineHeight: 40 }}>
                故障描述{' '}
                <Text style={{ color: 'red', marginLeft: 10 }}> * </Text>
              </Text>
              <TouchableWithoutFeedback
                onPress={Keyboard.dismiss} // 隐藏键盘
                accessible={false}>
                <View style={{ flex: 1 }}>
                  <Textarea
                    containerStyle={styles.textareaContainer}
                    style={styles.textarea}
                    onChangeText={t => {
                      this.setState({ bdExplain: t });
                    }}
                    defaultValue={this.state.bdExplain}
                    maxLength={120}
                    placeholder={'请输入描述'}
                    placeholderTextColor={'#c7c7c7'}
                    underlineColorAndroid={'transparent'}
                  />
                </View>
              </TouchableWithoutFeedback>
            </View>
            <CustomLinearGradient
              colors={['#51B6FC', '#7666FE']}
              start={{ x: 0, y: 0 }}
              end={{ x: 1, y: 1 }}>
              <OnTouchableOpacity
                style={{
                  width: '100%',
                  height: 40
                }}
                onPress={() => {
                  this.handleAddRepaire();
                }}>
                <Text style={{ color: '#fff', fontSize: 12 }}>提交</Text>
              </OnTouchableOpacity>
            </CustomLinearGradient>
          </ScrollView>
        </View>
      </KeyboardAvoidingView>
    );
  }
}

const styles = StyleSheet.create({
  header: {
    width: '100%',
    height: 98,
    backgroundColor: '#FFFFFF',
    padding: 19.33
  },
  textareaContainer: {
    height: 180,
    padding: 5,
    backgroundColor: '#F5FCFF'
  },
  textarea: {
    textAlignVertical: 'top', // hack android
    height: 170,
    fontSize: 14,
    color: '#333'
  },
  centering: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 8
  }
});
const OnTouchableOpacity = styled.TouchableOpacity`
  flex-direction: row;
  align-items: center;
  justify-content: center;
`;
const CustomLinearGradient = styled(LinearGradient)`
  margin-left: 20;
  margin-right: 20;
  margin-top: 18.67;
  margin-bottom: 18.67;
  border-radius: 19.55;
`;
// AppRegistry.registerComponent('ECharts', () => ECharts);
